<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <el-button type="primary" @click="dialogVisible = true">新建分类</el-button>
      </el-col>
    </el-row>
    <el-dialog title="新建分类" :visible.sync="dialogVisible" size="tiny" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="分类描述">
          <el-radio-group v-model="form.description">
            <el-radio selected label="正常"></el-radio>
            <el-radio label="热销"></el-radio>
            <el-radio label="折扣"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClassify()">确 定</el-button>
    </span>
    </el-dialog>
    <el-row>
      <el-col>
        <el-table :data="tableData" border>
          <el-table-column label="分类编号" width="100">
            <template scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品分类" min-width="150">
            <template scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分类描述" min-width="100">
            <template scope="scope">
              <el-icon name="status"></el-icon>
              <el-tag :type="scope.row.type==0?'success':'danger'">
                 {{ scope.row.description}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="180">
            <template scope="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog title="编辑分类" :visible.sync="editClassify" size="tiny" :before-close="editClose">
      <el-form ref="form" :model="editform" label-width="80px">
        <el-form-item label="分类编号">
          {{editform.id}}
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="editform.name"></el-input>
        </el-form-item>
        <el-form-item label="类别描述">
          <el-radio-group v-model="editform.description">
            <el-radio selected label="正常"></el-radio>
            <el-radio label="热销"></el-radio>
            <el-radio label="折扣"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editClassify = false">取 消</el-button>
        <el-button type="primary" @click="editConfirm">确 定</el-button>
    </span>
    </el-dialog>
    <el-row>
      <el-col>
        <el-pagination :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getClassify,addGoodsClassify,deleteGoodsClassify,updateGoodsClassify } from '@/api/goods'
  import { getToken } from '@/utils/auth'
  export default {
    data() {
      return {
        goods_id:0,
        total: 0,
        pageSize: 5,
        dialogVisible: false,
        editClassify: false,
        form: {
          name: "",
          description: "正常",
          type: 0,
        },
        editform: {
          id: 0,
          name: "",
          type: 0,
          description: ""
        },
        tableData: [],
        currentPage: 1
      };
    },
    created() {
        this.$nextTick(()=>{
   this.handleCurrentChange()
      })
    
    },
    methods: {
      addClassify() {
        var data = this.form
        if (data.description =="正常") {
              data.type = 0;
            } else if (data.description == "折扣" ) {
              data.type =1;
            } else {
              data.type =2;
            }
         data.goods_id = this.goods_id  
        addGoodsClassify(data).then((res)=>{
          if(res.status==1){
            this.$message({
              type: "success",
              message: "添加商品分类成功!"
            });
         this.handleCurrentChange()
          }
          
        })
        this.dialogVisible = false
      },
      editConfirm(){
         var data = this.editform
        if (data.description =="正常") {
              data.type = 0;
            } else if (data.description == "折扣" ) {
              data.type =1;
            } else {
              data.type =2;
            }
        updateGoodsClassify(data).then((res)=>{
           if(res.status==1){
             this.$message({
              type: "info",
              message: "已更新成功"
            });
             this.handleCurrentChange()
           }
        })
        this.editClassify=false

      },
      handleCurrentChange() {
        this.seller_id = getToken()
        let offset = this.currentPage
        getClassify(this.seller_id, offset).then((res) => {
          if(res.classify){
              this.total = res.count
          this.tableData = res.classify
          this.goods_id = res.goods_id
          this.tableData.map((item) => {
            if (item.type == 0) {
              item.description = "正常";
            } else if (item.type == 1) {
              item.description = "折扣";
            } else {
              item.description = "热销";
            }
            return item
          })
          }
          

        })
      },
      onSubmit() {
        this.$message("submit!");
      },
      handleClose(done) {
        this.$confirm("放弃新建？")
          .then(_ => {
            done();
          })
          .catch(_ => { });
      },
      editClose(done) {
        this.$confirm("放弃编辑？")
          .then(_ => {
            done();
          })
          .catch(_ => { });
      },
      handleEdit(index, row) {

        this.editform.id = row.id;
        this.editform.name = row.name;
        this.editform.type = row.type;
        this.editform.description = row.description;
        this.editClassify = true;
      },
      handleDelete(index, row) {
        this.$confirm("确定要删除该分类?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
        this.tableData.splice(index, 1)
           deleteGoodsClassify(row.id).then((res)=>{
            if(res.status==1){
              this.$message({
              type: "success",
              message: "删除成功!"
            });
            }
           })

            
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    }
  };

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>